<template>
    <div id="home" class="row mt-3">
        <div class="col-sm-12 text-center">
            <div class="background-color">
                <h1>欢迎大家品尝pizza！</h1>
                <p>这里有你非常喜欢的pizza！</p>
                <router-link class="btn btn-success" tag="button" :to="{name: 'Menu'}">Let's order!</router-link>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "Home",
        data() {
            return {

            }
        }
    }
</script>

<style scoped>
    #home {padding: 0 15px;}
    #home .col-sm-12.text-center {background-image: url(../../src/assets/pizza.jpg);height: 85vh;padding: 10%;}
    #home .col-sm-12.text-center .background-color h1, #home .col-sm-12.text-center .background-color p {margin: 6%;}
    .background-color {background-color: #eee;opacity: .8;max-width: 70vw;margin: 0 auto;padding: 20px 0;}
</style>